<template>
	<div>
		<Box :caption="caption">
			<div
					class="transmission__config"
					v-if="$route.path === '/contentManage/fileRecord'"
			>
				<!-- 搜索栏、新增按钮 -->
				<div class="top">
					<el-input
							v-model="search"
							placeholder="请输入操作者"
							@keypress.enter.native="fileSearch"
							prefix-icon="el-icon-search"
							clearable
							@clear="reset"
					></el-input>
					<el-button class="search" @click="fileSearch"><i class="el-icon-search"></i>搜索</el-button>
				</div>
				<!-- 列表 -->
				<div class="content">
					<el-table :data="recordList" stripe>
						<el-table-column
								prop="sysName"
								label="系统名称"
								min-width="120"
						>
						</el-table-column>
						<el-table-column
								prop="businessName"
								label="业务名称"
								min-width="120"
						>
						</el-table-column>
						<el-table-column
								prop="user"
								label="操作人"
								min-width="120"
						>
						</el-table-column>
						<el-table-column
								prop="ip"
								label="ip"
								min-width="120"
						>
						</el-table-column>
						<el-table-column
								prop="operateTime"
								label="操作时间"
								min-width="120"
						>
						</el-table-column>
						<el-table-column
								prop="operateType"
								label="操作类型"
								min-width="120"
						>
						</el-table-column>
						<el-table-column label="查看" width="220" fixed="right">
							<template slot-scope="scope">
								<div class="operation">
									<el-tooltip
											content="查看"
											effect="light"
											popper-class="small-tip"
									>
										<el-button
												class="action-btn look"
												icon="el-icon-view"
												@click="view(scope.row.id)"
										></el-button>
									</el-tooltip>
								</div>
								<slot
										name="other"
										:data="scope.row"
										:index="scope.$index"
								></slot>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- 分页 -->
				<div class="footer">
					<el-pagination
							background
							@current-change="handleCurrentChange"
							layout="prev, pager, next"
							:page-count="pageCount"
					>
					</el-pagination>
				</div>
			</div>
			<router-view />
		</Box>
	</div>
</template>

<script>
import Box from "@/components/pc/Box";

export default {
	name: "fileRecord",
	components: { Box },
	data() {
		return {
			caption: "操作记录",
			search: "",
			currentPage: 1,
			pageCount: "1",
			recordList: [],
		};
	},
	watch:{
		// 监听路由
		$route(to){
			if(to.path == '/contentManage/fileRecord'){
				this.getList();
			}
		}
	},
	async created() {
		// 初始化
		await this.getList();
	},
	methods: {
		// 获取列表
		async getList() {
			await this.$Http
					.fileList({
						currentPage: this.currentPage,
						pageSize: 8,
					})
					.then((res) => {
						this.pageCount = res.data.pageCount;
						this.recordList = res.data.list;
					});
		},
		// 查询
		async fileSearch() {
			await this.$Http
					.fileSearch({
						currentPage: this.currentPage,
						pageSize: 8,
						username: this.search,
					})
					.then((res) => {
						console.log(res);
						this.pageCount = res.data.pageCount;
						this.recordList = res.data.list;
					});
		},
		// 重置
		reset() {
			this.search = "";
			this.getList();
		},
		// 分页
		handleCurrentChange(newPage) {
			this.currentPage = newPage;
			this.getList();
		},
		// 查看
		view(id) {
			this.$router.push({ path: '/contentManage/fileView' , query:{id:id} });
		},
	},
}
</script>

<style scoped lang="scss">
@import "../../../../assets/css/content";
</style>

